<template>
  <div>
    <el-form :model="form" inline>
      <el-form-item label="支付账号：">
        <el-input v-model="form.account" />
      </el-form-item>
      <el-form-item label="账号状态：">
        <el-select v-model="form.accountStatusId">
          <el-option label="全部" :value="0" />
          <el-option :label="item.value" :value="item.key" v-for="item in AccTypeArr" :key="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit">搜索</el-button>
        <el-button type="primary" @click="addAccountInformation" style="margin-left: 100px;">添加账号</el-button>
        <el-button type="primary" @click="delectAccount(multipleSelection)">批量删除</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="tableDiv">
    <el-table :data="tableData" border style="width: 1000px" @selection-change="handleSelectionChange" max-height="660">
      <el-table-column type="selection" width="55" />
      <el-table-column label="支付账号" width="220">
        <template #default="scope">{{ scope.row.account }}</template>
      </el-table-column>
      <el-table-column label="登录密码" width="120">
        <template #default="scope">{{ scope.row.loginPass }}</template>
      </el-table-column>
      <el-table-column label="支付密码" width="120">
        <template #default="scope">{{ scope.row.payPass }}</template>
      </el-table-column>
      <el-table-column label="更新时间" width="220">
        <template #default="scope">{{ scope.row.updateTime }}</template>
      </el-table-column>
      <el-table-column label="账号状态" width="120">
        <template #default="scope">{{ scope.row.accountStatusName }}</template>
      </el-table-column>
      <el-table-column label="操作" min-width="160">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="setAccount(scope.row)">
            编辑
          </el-button>
          <el-button link type="primary" size="small" @click="delectAccount(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 弹框 -->
  <div>
    <el-dialog v-model="dialogVisible" width="500">
      <span>
        <el-form :model="dialogVisibleForm">
          <el-form-item label="支付账号：">
            <el-input v-model="dialogVisibleForm.account" />
          </el-form-item>
          <el-form-item label="登录密码：">
            <el-input v-model="dialogVisibleForm.loginPass" />
          </el-form-item>
          <el-form-item label="支付密码：">
            <el-input v-model="dialogVisibleForm.payPass" />
          </el-form-item>
          <el-form-item label="账号状态：">
            <el-select v-model="dialogVisibleForm.accountStatusId">
              <el-option :label="item.value" :value="item.key" v-for="item in AccTypeArr" :key="item.key" />
            </el-select>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSettings">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- page -->
  <!-- <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div> -->
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { ElMessage } from 'element-plus'
import { procurementPayAccountcreate, procurementPayAccountlist, procurementPayAccountupdate, procurementPayAccountprocurementAccountStatusDic, procurementPayAccountremove } from '@/api/index'
const form = ref(
  {
    account: '',
    accountStatusId: 0
  }
)
const tableData = ref([])
onBeforeMount(() => {
  AccType()
  getList()
})
// 字典
const AccTypeArr = ref([])
const AccType = () => {
  procurementPayAccountprocurementAccountStatusDic().then(res => {
    const { data: { data } } = res
    AccTypeArr.value = data.accountStatusDicVOList
  })
}
const onSubmit = () => {
  console.log('submit!')
  getList()
}
const getList = () => {
  procurementPayAccountlist(form.value).then(res => {
    const { data: { data } } = res
    console.log('data')
    console.log(data)
    tableData.value = data
    // total.value = data.total
  })
}
// 多选
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 添
const AddOrSet = ref('1')
const dialogVisible = ref(false)
const dialogVisibleForm = ref({})
const addAccountInformation = () => {
  AddOrSet.value = '1'
  dialogVisibleForm.value = {}
  dialogVisible.value = true
}
const AccId = ref('')
const setAccount = (row) => {
  AddOrSet.value = '2'
  AccId.value = row.id
  dialogVisibleForm.value.account = row.account
  dialogVisibleForm.value.loginPass = row.loginPass
  dialogVisibleForm.value.payPass = row.payPass
  dialogVisibleForm.value.accountStatusId = row.accountStatusId.toString()
  dialogVisible.value = true
}
const saveSettings = () => {
  if (AddOrSet.value === '1') {
    procurementPayAccountcreate(dialogVisibleForm.value).then(res => {
      dialogVisible.value = false
      ElMessage.success('操作成功')
      getList()
    })
  } else if (AddOrSet.value === '2') {
    console.log('编辑')
    procurementPayAccountupdate(dialogVisibleForm.value, AccId.value).then(res => {
      dialogVisible.value = false
      ElMessage.success('操作成功')
      getList()
    })
  }
}
// 删
const delectAccount = (val) => {
  if (Object.prototype.toString.call(val) === '[object Object]') {
    procurementPayAccountremove({ ids: [val.id] }).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  } else if (Object.prototype.toString.call(val) === '[object Array]') {
    const a = []
    val.forEach(element => {
      console.log(element)
      a.push(element.id)
    })
    procurementPayAccountremove({ ids: a }).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  }
}
// 分页
// const currentPage4 = ref(1)
// const pageSize4 = ref(10)
// const total = ref(0)
// const handleSizeChange = (val) => {
//   console.log(`${val} items per page`)
//   form.value.pageSize = val
//   getList()
// }
// const handleCurrentChange = (val) => {
//   console.log(`current page: ${val}`)
//   form.value.pageNum = val
//   getList()
// }
</script>

<style lang='less' scoped></style>
